<template>
  <div class="add-category">
    <el-button type="text" @click="dialogVisible=true">新增分类</el-button>
    <el-dialog :visible.sync="dialogVisible" title="新增分类">
      <el-form label-position="left" label-width="100px" ref="form" :model="form">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="分类图片" prop="fileList">
          <el-upload class="upload-demo" action="http://122.112.175.16:1234/tmall_springboot/categories" :limit="1"
            :before-upload="handleBeforeUpload" ref="upload" :file-list="form.fileList" v-model="form.fileList" :data="{name:name}"
            :auto-upload="false" :on-success="handleSuccess" name="image">
            <el-button size="small" type="primary" plain>点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item prop="submit">
          <el-button type="success" @click="commit()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {
    addCategory
  } from '@/api/admin/category.js'
  export default {
    data() {
      return {
        dialogVisible: false,
        name: '',
        form: {},
        uploadData: {
          name: ''
        },
      }
    },
    methods: {
      handleBeforeUpload(file) {
        // this.form.fileList = []
        // this.form.fileList.push(file)
		if(!this.name){
			this.$message.error('名称不能为空')
			return false
		}
        this.$set(this.uploadData, 'name', this.name)
      },
      commit() {
        this.$refs.upload.submit()
      },
      // uploadFile(e) {
      //   let data = {
      //     name: this.form.name,
      //     image: e.file
      //   }
      //   addCategory(data).then(response => {
      //     this.$message({
      //       type: 'success',
      //       message: '添加成功'
      //     })
      //     this.dialogVisible = false
      //     this.$emit('flash')
      //     this.$refs.form.resetFields()
      //     this.form.fileList = []
      //   })
      // },
      handleSuccess() {
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.dialogVisible = false
        this.$emit('flash')
        this.$refs.form.resetFields()
        this.form.fileList = []
      }
    },
  }
</script>

<style scoped>
  .add-category {
    padding-left: 5%;
    padding-top: 40px;
  }
</style>
